<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <script type="text/javascript"  src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <style>
        body{
            padding:0;
            margin:0;
        }

        html,body{
            height:100%
        }
    </style>
    <script type="text/javascript">
        //person data
        var personTableData;
        var vm;
        function initTable(data) {
            vm = new Vue(
                {
                    el:'#app',
                    data:{
                        activeIndex: '1',
                        activeIndex2: '1',
                        personTableData:data,
                        multipleSelection: [],
                        dialogTableVisible: false,
                        dialogFormVisible: false,
                        form: {
                            name: '',
                            age: 19,
                            gender: '',
                            address: '',
                        },
                        formLabelWidth: '120px',

                        handleSelect(key, keyPath) {
                            console.log(key, keyPath);
                        },
                        handleSelectionChange(val) {
                            this.multipleSelection = val;
                        },
                        //提交创建person表单
                        submitFormInsertPerson(){
                            console.log(vm.$data.form.age);
                            $.ajax({
                                url:'/personManager/Home/Person/insertPerson',
                                data:{
                                    name:vm.$data.form.name,
                                    age:vm.$data.form.age,
                                    address:vm.$data.form.address,
                                },
                                type:'post',
                                success:function (data) {
                                    vm.$data.dialogFormVisible = false;
                                    if (data=='success'){
                                        vm.$message({
                                            message:'添加person成功!',
                                            type:'success'
                                        })
                                    }else{
                                        vm.$message({
                                            message:'添加person失败!',
                                            type:'error'
                                        })
                                    }
                                }
                            });
                        }
                    }
                }
            );
            var Main = {
                data() {
                    return {
                        activeIndex: '1',
                        activeIndex2: '1',
                        personTableData:data,
                        multipleSelection: [],
                        dialogTableVisible: false,
                        dialogFormVisible: false,
                        form: {
                            name: '',
                            age: '',
                            gender: '',
                            address: '',
                        },
                        formLabelWidth: '120px',
                    };
                },
                methods: {
                    handleSelect(key, keyPath) {
                        console.log(key, keyPath);
                    },
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                    },
                    //提交创建person表单
                    submitFormInsertPerson(){

                        dialogFormVisible = false;
                    }
                }
            }

//            var Ctor = Vue.extend(Main)
//            new Ctor().$mount('#app')
        }


        $(function () {
            $.ajax('/personManager/Home/Person/queryAllPerson.html',{
                success:function (data) {
                    personTableData = data;
                    console.log(data[1])
                    initTable(data);
                },
                error:function () {
                    initTable(null);
                }
            });
        })
    </script>
</head>
<body>
<div id="app" style="height: 100%">
    <el-row>
        <el-col :span="24">
            <el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                </el-submenu>
                <el-menu-item index="3">订单管理</el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
    <el-row style="height: 100%">
        <el-col :span="4" style="height: 100%;" >
            <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo" style="height: 100%;">
                <el-menu-item-group title="分组一">
                    <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
                    <el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组二">
                    <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
                    <el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
                </el-menu-item-group>
            </el-menu>
        </el-col>
        <el-col :span="20">
            <el-row>
                <el-col style="padding: 5px;background: #EEF1F6">
                    <el-button type="primary" icon="edit" style="margin-left: 10px"></el-button>
                    <el-button type="success" icon="share">刷新</el-button>
                    <el-button type="danger" icon="delete">批量删除</el-button>
                    <el-button type="info" icon="search">搜索</el-button>
                    <el-button type="info" icon="add" @click="dialogFormVisible = true">添加<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <template>
                        <el-table
                                :data="personTableData"
                                border
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>

                            <el-table-column
                                    prop="id"
                                    label="ID"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="age"
                                    label="年龄"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="gender"
                                    label="性别"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="地址"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template scope="scope">
                                    <el-button
                                            size="small"
                                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button
                                            size="small"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-col>
            </el-row>
        </el-col>
    </el-row>

    <el-dialog title="收货地址" v-model="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age" :label-width="formLabelWidth">
                <el-input v-model.number="form.age"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitFormInsertPerson()">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>


</script>
</html>